import styles from './form-elem.module.css';

import Select from '../Select';
import Input from '../Input';

const FormElem = ({type='text', value, label, onChange, suggs, stat, msg, isDisabled}) => {

  const color = {
    'norm' : 'green',
    'warn' : 'yellow',
    'dead' : 'red',
  }[stat];

  let fieldElem;
  switch (type) {
    case 'list':
    case 'file':
    case 'select':
      fieldElem = <Select {...{value, suggs, onChange, color, onSelectOption:onChange, isDisabled}}/>;
      break;
    case 'numeric':
    case 'password':
    case 'text':
    default:
      fieldElem = <Input {...{value, onChange, color, type, isDisabled}} />
  }

  let validElem = <div className={styles[`${stat ?? 'norm'}`]} >{msg ?? ' '}</div>;

  return (<div className={styles['form-control']}>
    <div className={styles['form-label']}>{label}</div>
    {fieldElem}
    {validElem}
  </div>);
}

export default FormElem;